<!doctype html>



  


<html class="theme-next pisces use-motion">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PBHRK7');</script>
<!-- End Google Tag Manager -->
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="前端," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.2" />






<meta name="description" content="海出React Native 代码规范 本规范主要用于海出React Native项目，主要包含以下几块    React/JSX代码规范     ES6代码规范     项目结构规范   React/JSX代码规范文件与组件命名 扩展名:使用.js作为js文件的扩展名。如果同一个文件夹下有同名而不同作用的js文件，则通过中缀（小写）进一步区分，例如：HomeView.component.js,H">
<meta name="keywords" content="前端">
<meta property="og:type" content="article">
<meta property="og:title" content="海出React Native 规范">
<meta property="og:url" content="http://wurh.github.io/2018/06/25/20180625/index.html">
<meta property="og:site_name" content="华Ing&#39;s blog">
<meta property="og:description" content="海出React Native 代码规范 本规范主要用于海出React Native项目，主要包含以下几块    React/JSX代码规范     ES6代码规范     项目结构规范   React/JSX代码规范文件与组件命名 扩展名:使用.js作为js文件的扩展名。如果同一个文件夹下有同名而不同作用的js文件，则通过中缀（小写）进一步区分，例如：HomeView.component.js,H">
<meta property="og:locale" content="en">
<meta property="og:updated_time" content="2019-07-12T06:10:38.185Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="海出React Native 规范">
<meta name="twitter:description" content="海出React Native 代码规范 本规范主要用于海出React Native项目，主要包含以下几块    React/JSX代码规范     ES6代码规范     项目结构规范   React/JSX代码规范文件与组件命名 扩展名:使用.js作为js文件的扩展名。如果同一个文件夹下有同名而不同作用的js文件，则通过中缀（小写）进一步区分，例如：HomeView.component.js,H">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'Author'
    }
  };
</script>




  <link rel="canonical" href="http://wurh.github.io/2018/06/25/20180625/"/>


  <title> 海出React Native 规范 | 华Ing's blog </title>
</head>

<body itemscope itemtype="//schema.org/WebPage" lang="en">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBHRK7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

  










  
  
    
  

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-69412379-1', 'auto');
  ga('send', 'pageview');

</script>

  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b3ddfb8655d8b77429e04c7a4d5bcbc1";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
  </script>


  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="//schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">华Ing's blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">harder and harder</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            Categories
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            Tags
          </a>
        </li>
      

      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="//schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                海出React Native 规范
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2018-06-25T19:20:00+08:00" content="2018-06-25">
              2018-06-25
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/技术架构/" itemprop="url" rel="index">
                    <span itemprop="name">技术架构</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/2018/06/25/20180625/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="2018/06/25/20180625/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="海出React-Native-代码规范"><a href="#海出React-Native-代码规范" class="headerlink" title="海出React Native 代码规范"></a>海出React Native 代码规范</h1><blockquote>
<p>本规范主要用于海出React Native项目，主要包含以下几块</p>
</blockquote>
<blockquote>
<ul>
<li>React/JSX代码规范</li>
</ul>
</blockquote>
<blockquote>
<ul>
<li>ES6代码规范</li>
</ul>
</blockquote>
<blockquote>
<ul>
<li>项目结构规范</li>
</ul>
</blockquote>
<h2 id="React-JSX代码规范"><a href="#React-JSX代码规范" class="headerlink" title="React/JSX代码规范"></a>React/JSX代码规范</h2><h3 id="文件与组件命名"><a href="#文件与组件命名" class="headerlink" title="文件与组件命名"></a>文件与组件命名</h3><ul>
<li><p>扩展名:使用.js作为js文件的扩展名。<br>如果同一个文件夹下有同名而不同作用的js文件，则通过中缀（小写）进一步区分，例如：HomeView.component.js,HomeView.style.js,HomeView.action.js等。</p>
</li>
<li><p>文件名: 使用驼峰命名法且首字母大写，如HomeView.js。</p>
</li>
<li><p>组件命名: 与文件名（除中缀外）完全一致。如果组件单独放置在目录中，则目录名也一致。</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">import</span> Footer <span class="keyword">from</span> <span class="string">'./Component/Footer/FooterView'</span> </span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">import</span> Footer <span class="keyword">from</span> <span class="string">'./Component/Footer/Footer'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">import</span> Footer <span class="keyword">from</span> <span class="string">'./Footer'</span></span><br></pre></td></tr></table></figure>
<h3 id="组件声明"><a href="#组件声明" class="headerlink" title="组件声明"></a>组件声明</h3><ul>
<li>使用class与extends关键字。不使用React.createClass方法。需要导出的组件直接在class关键字前使用export default。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> React.createClass(&#123;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">HomeView</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="对齐"><a href="#对齐" class="headerlink" title="对齐"></a>对齐</h3><ul>
<li>组件的属性要对齐，如果能一行摆下的props，最好摆在一行（个人建议超过两个就换行）。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">&lt;Foo superLongParam=<span class="string">"bar"</span></span><br><span class="line">     anotherSuperLongParam=<span class="string">"baz"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">&lt;Foo</span><br><span class="line">  superLongParam=<span class="string">"bar"</span></span><br><span class="line">  anotherSuperLongParam=<span class="string">"baz"</span></span><br><span class="line">/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果一行能摆下props，那就摆在一行</span></span><br><span class="line">&lt;Foo bar=<span class="string">"bar"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 子组件照常缩进</span></span><br><span class="line">&lt;Foo</span><br><span class="line">  superLongParam=<span class="string">"bar"</span></span><br><span class="line">  anotherSuperLongParam=<span class="string">"baz"</span></span><br><span class="line">&gt;</span><br><span class="line">  &lt;Spazz /&gt;</span><br><span class="line">&lt;<span class="regexp">/Foo&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="引号"><a href="#引号" class="headerlink" title="引号"></a>引号</h3><ul>
<li>对于JSX的字符串属性使用双引号(“)，其他情况下使用单引号。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">&lt;Foo bar=<span class="string">'bar'</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">&lt;Foo bar=<span class="string">"bar"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">&lt;Foo style=&#123;&#123; <span class="attr">left</span>: <span class="string">"20px"</span> &#125;&#125; /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">&lt;Foo style=&#123;&#123; <span class="attr">left</span>: <span class="string">'20px'</span> &#125;&#125; /&gt;</span><br></pre></td></tr></table></figure>
<h3 id="空格"><a href="#空格" class="headerlink" title="空格"></a>空格</h3><ul>
<li>在自闭合的标签中包含一个空格。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">&lt;Foo/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// very bad</span></span><br><span class="line">&lt;Foo                 /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">&lt;Foo</span><br><span class="line"> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">&lt;Foo /&gt;</span><br></pre></td></tr></table></figure>
<h3 id="state-props"><a href="#state-props" class="headerlink" title="state/props"></a>state/props</h3><ul>
<li>对于多个单词组成的pros，使用驼峰命名法。不使用下划线或连接线。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">&lt;Foo</span><br><span class="line">  UserName=<span class="string">"hello"</span></span><br><span class="line">  phone_number=&#123;<span class="number">12345678</span>&#125;</span><br><span class="line">/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">&lt;Foo</span><br><span class="line">  userName=<span class="string">"hello"</span></span><br><span class="line">  phoneNumber=&#123;<span class="number">12345678</span>&#125;</span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>读取state和props时，使用const与解构，必要时可使用let。不使用var。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> userName = <span class="keyword">this</span>.props.userName;</span><br><span class="line"><span class="keyword">let</span> checked = <span class="keyword">this</span>.state.checked;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">const</span> &#123; userName, age, sex &#125; = <span class="keyword">this</span>.props;</span><br><span class="line"><span class="keyword">const</span> &#123; checked &#125; = <span class="keyword">this</span>.state;</span><br></pre></td></tr></table></figure>
<h3 id="括号"><a href="#括号" class="headerlink" title="括号"></a>括号</h3><ul>
<li>当JSX标签超过一行时，使用括号包裹。单行时，不必有括号。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/// bad</span></span><br><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">MyComponent</span> <span class="attr">className</span>=<span class="string">"long body"</span> <span class="attr">foo</span>=<span class="string">"bar"</span>&gt;</span></span></span><br><span class="line"><span class="xml">           <span class="tag">&lt;<span class="name">MyChild</span> /&gt;</span></span></span><br><span class="line"><span class="xml">         <span class="tag">&lt;/<span class="name">MyComponent</span>&gt;</span></span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;MyComponent className=<span class="string">"long body"</span> foo=<span class="string">"bar"</span>&gt;</span><br><span class="line">      &lt;MyChild /&gt;</span><br><span class="line">    &lt;<span class="regexp">/MyComponent&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ good, when single line</span></span><br><span class="line"><span class="regexp">render() &#123;</span></span><br><span class="line"><span class="regexp">  const body = &lt;div&gt;hello&lt;/</span>div&gt;;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">MyComponent</span>&gt;</span>&#123;body&#125;<span class="tag">&lt;/<span class="name">MyComponent</span>&gt;</span></span>;</span><br></pre></td></tr></table></figure>
<h3 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h3><ul>
<li>对于没有子组件的JSX标签，始终自闭合。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">&lt;Foo className=<span class="string">"stuff"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">Foo</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">&lt;Foo className=<span class="string">"stuff"</span> /&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>如果组件有多行属性，则另起一行进行自闭合。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">&lt;Foo</span><br><span class="line">  bar=<span class="string">"bar"</span></span><br><span class="line">  baz=<span class="string">"baz"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">&lt;Foo</span><br><span class="line">  bar=<span class="string">"bar"</span></span><br><span class="line">  baz=<span class="string">"baz"</span></span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
<h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3><ul>
<li>为方法命名时，不使用下划线开头（哪怕是想用作私有方法）。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">React.createClass(&#123;</span><br><span class="line">  _onClickSubmit() &#123;</span><br><span class="line">    <span class="comment">// do stuff</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// other stuff</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  onClickSubmit() &#123;</span><br><span class="line">    <span class="comment">// do stuff</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// other stuff</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="方法声明的顺序"><a href="#方法声明的顺序" class="headerlink" title="方法声明的顺序"></a>方法声明的顺序</h3><ul>
<li>原则上按如下顺序排列React组件的各个方法（生命周期）：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> <span class="keyword">constructor</span></span><br><span class="line">2. 静态方法（static methods)</span><br><span class="line">3. getChildContext</span><br><span class="line">4. componentWillMount</span><br><span class="line">5. componentDidMount</span><br><span class="line">6. componentWillReceiveProps</span><br><span class="line">7. shouldComponentUpdate</span><br><span class="line">8. componentWillUpdate</span><br><span class="line">9. componentDidUpdate</span><br><span class="line">10. componentWillUnmount</span><br><span class="line">11. 点击处理或事件处理函数，比如onClickSubmit()、 onChangeDescription()</span><br><span class="line">12. 用在render中的getter方法，比如getSelectReason()、 getFooterContent()</span><br><span class="line">13. 可选的render方法，比如renderNavigation()、renderProfilePicture()</span><br><span class="line">14. render</span><br></pre></td></tr></table></figure>
<ul>
<li>按如下方式定义propTypes, defaultProps, contextTypes等</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component, PropTypes &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> propTypes = &#123;</span><br><span class="line">  id: PropTypes.number.isRequired,</span><br><span class="line">  url: PropTypes.string.isRequired,</span><br><span class="line">  text: PropTypes.string,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> defaultProps = &#123;</span><br><span class="line">  text: <span class="string">'Hello World'</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Link</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> methodsAreOk() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#123;this.props.url&#125;</span> <span class="attr">data-id</span>=<span class="string">&#123;this.props.id&#125;</span>&gt;</span>&#123;this.props.text&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Link.propTypes = propTypes;</span><br><span class="line">Link.defaultProps = defaultProps;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Link;</span><br></pre></td></tr></table></figure>
<h2 id="ES6-代码规范"><a href="#ES6-代码规范" class="headerlink" title="ES6 代码规范"></a>ES6 代码规范</h2><h3 id="变量与常量声明"><a href="#变量与常量声明" class="headerlink" title="变量与常量声明"></a>变量与常量声明</h3><h4 id="1-1-变量"><a href="#1-1-变量" class="headerlink" title="1.1 变量"></a>1.1 变量</h4><p>尽量使用let来代替var<br>对于全局变量声明，采用global.xxx = xxx，但应避免声明过多全局变量污染环境</p>
<h4 id="1-2-常量"><a href="#1-2-常量" class="headerlink" title="1.2 常量"></a>1.2 常量</h4><p>对于常量应使用const进行声明，命名采用驼峰写法<br>对于使用 immutable 数据应用const进行声明</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">let</span> someNum = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">const</span> AnotherStr = <span class="string">'不变的字符串'</span>;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'不'</span>, <span class="string">'变'</span>, <span class="string">'数'</span>, <span class="string">'组'</span>];</span><br><span class="line"><span class="keyword">var</span> ANOTHER_OBJ = &#123;</span><br><span class="line">  <span class="string">'不变对象'</span>: <span class="literal">true</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">const</span> someNum = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">const</span> anotherStr = <span class="string">'不变的字符串'</span>;</span><br><span class="line"><span class="keyword">const</span> arr = [<span class="string">'不'</span>, <span class="string">'变'</span>, <span class="string">'数'</span>, <span class="string">'组'</span>];</span><br><span class="line"><span class="keyword">const</span> anotherObj = &#123;</span><br><span class="line">  <span class="string">'不变对象'</span>: <span class="literal">true</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><h4 id="2-1-处理多行字符串-使用模板字符串"><a href="#2-1-处理多行字符串-使用模板字符串" class="headerlink" title="2.1 处理多行字符串,使用模板字符串"></a>2.1 处理多行字符串,使用模板字符串</h4><p>以反引号( ` )标示，可读性更强，代码更易编写。<br>注意排版引起空格的问题，使用场景为声明HTML模板字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">const</span> tmpl = <span class="string">'&lt;div class="content"&gt; \n'</span> +</span><br><span class="line">              <span class="string">'&lt;h1&gt;这是换行了。&lt;/h1&gt; \n'</span> +</span><br><span class="line">            <span class="string">'&lt;/div&gt;'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">const</span> tmpl = <span class="string">`</span></span><br><span class="line"><span class="string">&lt;div class="content"&gt;</span></span><br><span class="line"><span class="string">  &lt;h1&gt;这是换行了。&lt;/h1&gt;</span></span><br><span class="line"><span class="string">&lt;/div&gt;`</span>;</span><br></pre></td></tr></table></figure>
<h4 id="2-2-处理字符串拼接变量时-使用模板字符串"><a href="#2-2-处理字符串拼接变量时-使用模板字符串" class="headerlink" title="2.2 处理字符串拼接变量时,使用模板字符串"></a>2.2 处理字符串拼接变量时,使用模板字符串</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">sayHi</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">   <span class="keyword">return</span> <span class="string">'How are you, '</span> + name + <span class="string">'?'</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 好</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">sayHi</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">   <span class="keyword">return</span> <span class="string">`How are you, <span class="subst">$&#123;name&#125;</span>?`</span>;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<h3 id="解构"><a href="#解构" class="headerlink" title="解构"></a>解构</h3><h4 id="3-1-解构语句中不使用圆括号"><a href="#3-1-解构语句中不使用圆括号" class="headerlink" title="3.1 解构语句中不使用圆括号"></a>3.1 解构语句中不使用圆括号</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line">[(a)] = [<span class="number">11</span>]; <span class="comment">// a未定义</span></span><br><span class="line"><span class="keyword">let</span> &#123; <span class="attr">a</span>: (b) &#125; = &#123;&#125;; <span class="comment">// 解析出错</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">let</span> [a, b] = [<span class="number">11</span>, <span class="number">22</span>];</span><br></pre></td></tr></table></figure>
<h4 id="3-2-对象解构"><a href="#3-2-对象解构" class="headerlink" title="3.2 对象解构"></a>3.2 对象解构</h4><p>对象解构 元素与顺序无关<br>对象指定默认值时仅对恒等于undefined ( !== null ) 的情况生效</p>
<ul>
<li>若函数形参为对象时，使用对象解构赋值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someFun</span>(<span class="params">opt</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> opt1 = opt.opt1;</span><br><span class="line">  <span class="keyword">let</span> opt2 = opt.opt2;</span><br><span class="line">  <span class="built_in">console</span>.log(op1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someFun</span>(<span class="params">opt</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> &#123; opt1, opt2 &#125; = opt;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`$(opt1) 加上 $(opt2)`</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">someFun</span>(<span class="params">&#123; opt1, opt2 &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(opt1);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>若函数有多个返回值时，使用对象解构，不使用数组解构，避免添加顺序的问题</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">anotherFun</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> one = <span class="number">1</span>, two = <span class="number">2</span>, three = <span class="number">3</span>;</span><br><span class="line">  <span class="keyword">return</span> [one, two, three];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> [one, three, two] = anotherFun(); <span class="comment">// 顺序乱了</span></span><br><span class="line"><span class="comment">// one = 1, two = 3, three = 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">anotherFun</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> one = <span class="number">1</span>, two = <span class="number">2</span>, three = <span class="number">3</span>;</span><br><span class="line">  <span class="keyword">return</span> &#123; one, two, three &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> &#123; one, three, two &#125; = anotherFun(); <span class="comment">// 不用管顺序</span></span><br><span class="line"><span class="comment">// one = 1, two = 2, three = 3</span></span><br></pre></td></tr></table></figure>
<ul>
<li>已声明的变量不能用于解构赋值（语法错误）</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 语法错误</span></span><br><span class="line"><span class="keyword">let</span> a;</span><br><span class="line">&#123; a &#125; = &#123; <span class="attr">b</span>: <span class="number">123</span>&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="3-3-数组解构"><a href="#3-3-数组解构" class="headerlink" title="3.3 数组解构"></a>3.3 数组解构</h4><p>数组元素与顺序相关</p>
<ul>
<li>交换变量的值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> x = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> y = <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">let</span> temp;</span><br><span class="line">temp = x;</span><br><span class="line">x = y;</span><br><span class="line">y = temp;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line">[x, y] = [y, x]; <span class="comment">// 交换变量</span></span><br></pre></td></tr></table></figure>
<ul>
<li>将数组成员赋值给变量时，使用数组解构</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">const</span> one = arr[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">const</span> two = arr[<span class="number">1</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">const</span> [one, two] = arr;</span><br></pre></td></tr></table></figure>
<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><h4 id="4-1-将类数组-array-like-对象与可遍历对象-如Set-Map-转为真正数组"><a href="#4-1-将类数组-array-like-对象与可遍历对象-如Set-Map-转为真正数组" class="headerlink" title="4.1 将类数组(array-like)对象与可遍历对象(如Set, Map)转为真正数组"></a>4.1 将类数组(array-like)对象与可遍历对象(如Set, Map)转为真正数组</h4><p>采用Array.from进行转换</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> args = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> args = <span class="built_in">Array</span>.from(<span class="built_in">arguments</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="4-2-数组去重"><a href="#4-2-数组去重" class="headerlink" title="4.2 数组去重"></a>4.2 数组去重</h4><p>结合Set结构与Array.from<br>使用indexOf，HashTable等形式，不够简洁清晰</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deduplication</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Array</span>.from(<span class="keyword">new</span> <span class="built_in">Set</span>(arr));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="4-3-数组拷贝"><a href="#4-3-数组拷贝" class="headerlink" title="4.3 数组拷贝"></a>4.3 数组拷贝</h4><p>采用数组扩展…形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> items = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">const</span> len = items.length;</span><br><span class="line"><span class="keyword">let</span> copyTemp = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">  copyTemp[i] = items[i];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">let</span> copyTemp = [...items];</span><br></pre></td></tr></table></figure>
<h4 id="4-4-将一组数值转为数组"><a href="#4-4-将一组数值转为数组" class="headerlink" title="4.4 将一组数值转为数组"></a>4.4 将一组数值转为数组</h4><p>采用Array.of进行转换</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">let</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">2</span>); <span class="comment">// [undefined x 2]</span></span><br><span class="line"><span class="keyword">let</span> arr2 = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">let</span> arr1 = <span class="built_in">Array</span>.of(<span class="number">2</span>);  <span class="comment">// [2]</span></span><br><span class="line"><span class="keyword">let</span> arr2 = <span class="built_in">Array</span>.of(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>); <span class="comment">// [1, 2, 3]</span></span><br></pre></td></tr></table></figure>
<h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><h4 id="5-1-当要用函数表达式或匿名函数时，使用箭头函数-Arrow-Functions"><a href="#5-1-当要用函数表达式或匿名函数时，使用箭头函数-Arrow-Functions" class="headerlink" title="5.1 当要用函数表达式或匿名函数时，使用箭头函数(Arrow Functions)"></a>5.1 当要用函数表达式或匿名函数时，使用箭头函数(Arrow Functions)</h4><p>箭头函数更加简洁，并且绑定了this</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">const</span> foo = <span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(foo.name); <span class="comment">// 返回'' ，函数表达式默认省略name属性</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].map(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> x + <span class="number">1</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> testObj = &#123;</span><br><span class="line">  name: <span class="string">'testObj'</span>,</span><br><span class="line">  init() &#123;</span><br><span class="line">    <span class="keyword">var</span> _this = <span class="keyword">this</span>; <span class="comment">// 保存定义时的this引用</span></span><br><span class="line">    <span class="built_in">document</span>.addEventListener(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> _this.doSth();</span><br><span class="line">    &#125;, <span class="literal">false</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  doSth() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">const</span> foo = <span class="function">(<span class="params">x</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(foo.name); <span class="comment">// 返回'foo'</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].map( <span class="function">(<span class="params">x</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> x + <span class="number">1</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> testObj = &#123;</span><br><span class="line">  name: <span class="string">'testObj'</span>,</span><br><span class="line">  init() &#123;</span><br><span class="line">    <span class="comment">// 箭头函数自动绑定定义时所在的对象</span></span><br><span class="line">    <span class="built_in">document</span>.addEventListener(<span class="string">'click'</span>, () =&gt; <span class="keyword">this</span>.doSth(), <span class="literal">false</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  doSth() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<ul>
<li>箭头函数书写约定</li>
</ul>
<p>函数体只有单行语句时，允许写在同一行并去除花括号<br>当函数只有一个参数时，允许去除参数外层的括号</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">const</span> foo = <span class="function"><span class="params">x</span> =&gt;</span> x + x; <span class="comment">// 注意此处会隐性return x + x</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> foo = <span class="function">(<span class="params">x</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> x + x; <span class="comment">// 若函数体有花括号语句块时须进行显性的return</span></span><br><span class="line">&#125;; </span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].map( <span class="function"><span class="params">x</span> =&gt;</span> x * x);</span><br></pre></td></tr></table></figure>
<ul>
<li>用箭头函数返回一个对象，应用括号包裹</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">let</span> test = <span class="function"><span class="params">x</span> =&gt;</span> &#123; <span class="attr">x</span>: x &#125;; <span class="comment">// 花括号会变成语句块，不表示对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">let</span> test = <span class="function"><span class="params">x</span> =&gt;</span> (&#123; <span class="attr">x</span>: x &#125;); <span class="comment">// 使用括号可正确return &#123;x:x&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="5-2-立即调用函数-IIFE"><a href="#5-2-立即调用函数-IIFE" class="headerlink" title="5.2 立即调用函数 IIFE"></a>5.2 立即调用函数 IIFE</h4><p>使用箭头函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'哈'</span>);</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line">(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'哈'</span>);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<h4 id="5-3-函数参数指定默认值"><a href="#5-3-函数参数指定默认值" class="headerlink" title="5.3 函数参数指定默认值"></a>5.3 函数参数指定默认值</h4><p>采用函数默认参数赋值语法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">opts</span>) </span>&#123;</span><br><span class="line">  opts = opts || &#123;&#125;;<span class="comment">// 此处有将0，''等假值转换掉为默认值的副作用</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">opts = &#123;&#125;</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'更加简洁，安全'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="5-4-对象中的函数方法使用缩写形式"><a href="#5-4-对象中的函数方法使用缩写形式" class="headerlink" title="5.4 对象中的函数方法使用缩写形式"></a>5.4 对象中的函数方法使用缩写形式</h4><p>更加简洁<br>函数方法不要使用箭头函数，避免this指向的混乱</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">const</span> shopObj = &#123;</span><br><span class="line">  des: <span class="string">'对象模块写法'</span>,</span><br><span class="line">  foo: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.des);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> shopObj = &#123;</span><br><span class="line">  des: <span class="string">'对象模块写法'</span>,</span><br><span class="line">  foo: <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.des); <span class="comment">// 此处会变成undefined.des，因为指向顶层模块的this</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">const</span> des = <span class="string">'对象模块写法'</span>; <span class="comment">// 使用对象属性值简写方式</span></span><br><span class="line"><span class="keyword">const</span> shopObj = &#123;</span><br><span class="line">  des,</span><br><span class="line">  foo() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.des);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><h4 id="6-1-类名应使用帕斯卡写法-PascalCased"><a href="#6-1-类名应使用帕斯卡写法-PascalCased" class="headerlink" title="6.1 类名应使用帕斯卡写法(PascalCased)"></a>6.1 类名应使用帕斯卡写法(PascalCased)</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SomeClass</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>类名与花括号须保留一个空格间距</li>
</ul>
<p>类中的方法定义时，括号 ) 也须与花括号 { 保留一个空格间距</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span></span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>()&#123;</span><br><span class="line">    <span class="comment">// constructor</span></span><br><span class="line">  &#125;</span><br><span class="line">  sayHi()    &#123;</span><br><span class="line">    <span class="comment">// 仅保留一个空格间距</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>() &#123;</span><br><span class="line">    <span class="comment">// constructor</span></span><br><span class="line">  &#125;</span><br><span class="line">  sayHi() &#123;</span><br><span class="line">    <span class="comment">// 仅保留一个空格间距</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="6-2-定义类时，方法的顺序如下："><a href="#6-2-定义类时，方法的顺序如下：" class="headerlink" title="6.2 定义类时，方法的顺序如下："></a>6.2 定义类时，方法的顺序如下：</h4><p>1.constructor<br>2.public get/set 公用访问器，set只能传一个参数<br>3.public methods 公用方法，公用相关命名使用小驼峰式写法(lowerCamelCase)<br>4.private get/set 私有访问器，私有相关命名应加上下划线 _ 为前缀<br>5.private methods 私有方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SomeClass</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>() &#123;</span><br><span class="line">    <span class="comment">// constructor</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  get aval() &#123;</span><br><span class="line">    <span class="comment">// public getter</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  set aval(val) &#123;</span><br><span class="line">    <span class="comment">// public setter</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  doSth() &#123;</span><br><span class="line">    <span class="comment">// 公用方法</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  get _aval() &#123;</span><br><span class="line">    <span class="comment">// private getter</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  set _aval() &#123;</span><br><span class="line">    <span class="comment">// private setter</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  _doSth() &#123;</span><br><span class="line">    <span class="comment">// 私有方法</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="6-3-如果不是class类，不使用new"><a href="#6-3-如果不是class类，不使用new" class="headerlink" title="6.3 如果不是class类，不使用new"></a>6.3 如果不是class类，不使用new</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> foo = <span class="keyword">new</span> Foo();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> foo = <span class="keyword">new</span> Foo();</span><br></pre></td></tr></table></figure>
<h4 id="6-4-使用真正意思上的类Class写法，不使用prototype进行模拟扩展"><a href="#6-4-使用真正意思上的类Class写法，不使用prototype进行模拟扩展" class="headerlink" title="6.4 使用真正意思上的类Class写法，不使用prototype进行模拟扩展"></a>6.4 使用真正意思上的类Class写法，不使用prototype进行模拟扩展</h4><p>Class更加简洁，易维护</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Dog</span>(<span class="params">names = []</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>._names = [...names];</span><br><span class="line">&#125;</span><br><span class="line">Dog.prototype.bark = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> currName = <span class="keyword">this</span>._names[<span class="number">0</span>];</span><br><span class="line">  alert(<span class="string">`one one <span class="subst">$&#123;currName&#125;</span>`</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(names = []) &#123;</span><br><span class="line">    <span class="keyword">this</span>._names = [...names];</span><br><span class="line">  &#125;</span><br><span class="line">  bark() &#123;</span><br><span class="line">    <span class="keyword">const</span> currName = <span class="keyword">this</span>._names[<span class="number">0</span>];</span><br><span class="line">    alert(<span class="string">`one one <span class="subst">$&#123;currName&#125;</span>`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="6-5-this的注意事项"><a href="#6-5-this的注意事项" class="headerlink" title="6.5 this的注意事项"></a>6.5 this的注意事项</h4><p>子类使用super关键字时，this应在调用super之后才能使用，可在方法中return this来实现链式调用写法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(x, y) &#123;</span><br><span class="line">    <span class="keyword">this</span>.x = x;</span><br><span class="line">    <span class="keyword">this</span>.y = y;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SubFoo</span> <span class="keyword">extends</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(x, y, z) &#123;</span><br><span class="line">    <span class="keyword">this</span>.z = z; <span class="comment">// 引用错误</span></span><br><span class="line">    <span class="keyword">super</span>(x, y);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SubFoo</span> <span class="keyword">extends</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(x, y, z) &#123;</span><br><span class="line">    <span class="keyword">super</span>(x, y);</span><br><span class="line">    <span class="keyword">this</span>.z = z; <span class="comment">// this 放在 super 后调用</span></span><br><span class="line">  &#125;</span><br><span class="line">  setHeight(height) &#123;</span><br><span class="line">    <span class="keyword">this</span>.height = height;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="模块"><a href="#模块" class="headerlink" title="模块"></a>模块</h3><h4 id="7-1-使用import-export来做模块加载导出，不使用非标准模块写法"><a href="#7-1-使用import-export来做模块加载导出，不使用非标准模块写法" class="headerlink" title="7.1 使用import / export来做模块加载导出，不使用非标准模块写法"></a>7.1 使用import / export来做模块加载导出，不使用非标准模块写法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">const</span> colors  = <span class="built_in">require</span>(<span class="string">'./colors'</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = color.lightRed;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">import</span> &#123; lightRed &#125; <span class="keyword">from</span> <span class="string">'./colors'</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> lightRed;</span><br></pre></td></tr></table></figure>
<h4 id="7-2-import-export-后面采用花括号-引入模块的写法时，须在花括号内左右各保留一个空格"><a href="#7-2-import-export-后面采用花括号-引入模块的写法时，须在花括号内左右各保留一个空格" class="headerlink" title="7.2 import / export 后面采用花括号{ }引入模块的写法时，须在花括号内左右各保留一个空格"></a>7.2 import / export 后面采用花括号{ }引入模块的写法时，须在花括号内左右各保留一个空格</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不好</span></span><br><span class="line"><span class="keyword">import</span> &#123;lightRed&#125; <span class="keyword">from</span> <span class="string">'./colors'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; lightRed&#125; <span class="keyword">from</span> <span class="string">'./colors'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 好</span></span><br><span class="line"><span class="keyword">import</span> &#123; lightRed &#125; <span class="keyword">from</span> <span class="string">'./colors'</span>;</span><br></pre></td></tr></table></figure>
<h2 id="React-Native项目结构规范"><a href="#React-Native项目结构规范" class="headerlink" title="React Native项目结构规范"></a>React Native项目结构规范</h2><p> 以下目录结构示例中只展示js与静态资源，不包含原生代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">├── app</span><br><span class="line">│   ├── Main.js      入口js， 页面路由目前也在此</span><br><span class="line">│   ├── component    组件文件夹</span><br><span class="line">│   ├── config       配置文件夹</span><br><span class="line">│   ├── pages        页面文件夹</span><br><span class="line">│   ├── res          资源文件夹， 包含工程图片，样式文件</span><br><span class="line">│   └── utils        工具类文件夹</span><br><span class="line">├── app.json</span><br><span class="line">├── index.js</span><br></pre></td></tr></table></figure>
<p>具体目录结构如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">├── app</span><br><span class="line">│   ├── Main.js</span><br><span class="line">│   ├── component</span><br><span class="line">│   │   ├── ErrorPage</span><br><span class="line">│   │   ├── LoadingView</span><br><span class="line">│   │   ├── OTextInput</span><br><span class="line">│   │   └── Toast</span><br><span class="line">│   ├── config</span><br><span class="line">│   │   └── i18n.js</span><br><span class="line">│   ├── pages</span><br><span class="line">│   │   ├── ForgotPassword</span><br><span class="line">│   │   ├── Home</span><br><span class="line">│   │   ├── Login</span><br><span class="line">│   │   ├── Splash</span><br><span class="line">│   │   └── Verification</span><br><span class="line">│   ├── res</span><br><span class="line">│   │   ├── data</span><br><span class="line">│   │   ├── img</span><br><span class="line">│   │   └── styles</span><br><span class="line">│   └── utils</span><br><span class="line">│       ├── Api.js</span><br><span class="line">│       ├── Constant.js</span><br><span class="line">│       ├── NetUtils.js</span><br><span class="line">│       ├── Screen.js</span><br><span class="line">│       ├── StorageUtils.js</span><br><span class="line">│       └── Utils.js</span><br><span class="line">├── app.json</span><br><span class="line">├── index.js</span><br></pre></td></tr></table></figure>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        
  <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
    <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="https://wurh.github.io/images/others/weixinshou.png" alt="华Ing WeChat Pay"/>
          <p>微信打赏</p>
        </div>
      
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="https://wurh.github.io/images/others/alifu.png" alt="华Ing Alipay"/>
          <p>支付宝打赏</p>
        </div>
      
    </div>
  </div>


      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端/" rel="tag">#前端</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/05/15/20180515/" rel="next" title="Pagium2.0使用文档">
                <i class="fa fa-chevron-left"></i> Pagium2.0使用文档
              </a>
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/08/28/20180828/" rel="prev" title="react-router-dom 初识">
                react-router-dom 初识 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        
<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="2018/06/25/20180625/"
           data-title="海出React Native 规范" data-url="http://wurh.github.io/2018/06/25/20180625/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            Overview
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="https://wurh.github.io/images/avatar/logo.jpg?123456"
               alt="华Ing" />
          <p class="site-author-name" itemprop="name">华Ing</p>
          <p class="site-description motion-element" itemprop="description">harder and harder</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">56</span>
              <span class="site-state-item-name">posts</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">categories</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">tags</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/wurh" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/1674582564/profile?topnav=1&wvr=6" target="_blank" title="微博">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  微博
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/wu-rong-hua-56" target="_blank" title="知乎">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              Links
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://fsiaonma.github.io/" title="sam博客" target="_blank">sam博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://shenjoel.github.io/" title="joel博客" target="_blank">joel博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://firewood1122.github.io" title="firewood博客" target="_blank">firewood博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://reqianduan.com" title="热前端" target="_blank">热前端</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://opentutorial.info/" title="黄超博客" target="_blank">黄超博客</a>
                </li>
              
            </ul>
          </div>
        

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#海出React-Native-代码规范"><span class="nav-number">1.</span> <span class="nav-text">海出React Native 代码规范</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#React-JSX代码规范"><span class="nav-number">1.1.</span> <span class="nav-text">React/JSX代码规范</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#文件与组件命名"><span class="nav-number">1.1.1.</span> <span class="nav-text">文件与组件命名</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#组件声明"><span class="nav-number">1.1.2.</span> <span class="nav-text">组件声明</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对齐"><span class="nav-number">1.1.3.</span> <span class="nav-text">对齐</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#引号"><span class="nav-number">1.1.4.</span> <span class="nav-text">引号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#空格"><span class="nav-number">1.1.5.</span> <span class="nav-text">空格</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#state-props"><span class="nav-number">1.1.6.</span> <span class="nav-text">state/props</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#括号"><span class="nav-number">1.1.7.</span> <span class="nav-text">括号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#标签"><span class="nav-number">1.1.8.</span> <span class="nav-text">标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法"><span class="nav-number">1.1.9.</span> <span class="nav-text">方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法声明的顺序"><span class="nav-number">1.1.10.</span> <span class="nav-text">方法声明的顺序</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ES6-代码规范"><span class="nav-number">1.2.</span> <span class="nav-text">ES6 代码规范</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#变量与常量声明"><span class="nav-number">1.2.1.</span> <span class="nav-text">变量与常量声明</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-1-变量"><span class="nav-number">1.2.1.1.</span> <span class="nav-text">1.1 变量</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#1-2-常量"><span class="nav-number">1.2.1.2.</span> <span class="nav-text">1.2 常量</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#字符串"><span class="nav-number">1.2.2.</span> <span class="nav-text">字符串</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-处理多行字符串-使用模板字符串"><span class="nav-number">1.2.2.1.</span> <span class="nav-text">2.1 处理多行字符串,使用模板字符串</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-处理字符串拼接变量时-使用模板字符串"><span class="nav-number">1.2.2.2.</span> <span class="nav-text">2.2 处理字符串拼接变量时,使用模板字符串</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解构"><span class="nav-number">1.2.3.</span> <span class="nav-text">解构</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#3-1-解构语句中不使用圆括号"><span class="nav-number">1.2.3.1.</span> <span class="nav-text">3.1 解构语句中不使用圆括号</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-对象解构"><span class="nav-number">1.2.3.2.</span> <span class="nav-text">3.2 对象解构</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-3-数组解构"><span class="nav-number">1.2.3.3.</span> <span class="nav-text">3.3 数组解构</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组"><span class="nav-number">1.2.4.</span> <span class="nav-text">数组</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#4-1-将类数组-array-like-对象与可遍历对象-如Set-Map-转为真正数组"><span class="nav-number">1.2.4.1.</span> <span class="nav-text">4.1 将类数组(array-like)对象与可遍历对象(如Set, Map)转为真正数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-2-数组去重"><span class="nav-number">1.2.4.2.</span> <span class="nav-text">4.2 数组去重</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-3-数组拷贝"><span class="nav-number">1.2.4.3.</span> <span class="nav-text">4.3 数组拷贝</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-4-将一组数值转为数组"><span class="nav-number">1.2.4.4.</span> <span class="nav-text">4.4 将一组数值转为数组</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数"><span class="nav-number">1.2.5.</span> <span class="nav-text">函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#5-1-当要用函数表达式或匿名函数时，使用箭头函数-Arrow-Functions"><span class="nav-number">1.2.5.1.</span> <span class="nav-text">5.1 当要用函数表达式或匿名函数时，使用箭头函数(Arrow Functions)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-2-立即调用函数-IIFE"><span class="nav-number">1.2.5.2.</span> <span class="nav-text">5.2 立即调用函数 IIFE</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-3-函数参数指定默认值"><span class="nav-number">1.2.5.3.</span> <span class="nav-text">5.3 函数参数指定默认值</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-4-对象中的函数方法使用缩写形式"><span class="nav-number">1.2.5.4.</span> <span class="nav-text">5.4 对象中的函数方法使用缩写形式</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#类"><span class="nav-number">1.2.6.</span> <span class="nav-text">类</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#6-1-类名应使用帕斯卡写法-PascalCased"><span class="nav-number">1.2.6.1.</span> <span class="nav-text">6.1 类名应使用帕斯卡写法(PascalCased)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#6-2-定义类时，方法的顺序如下："><span class="nav-number">1.2.6.2.</span> <span class="nav-text">6.2 定义类时，方法的顺序如下：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#6-3-如果不是class类，不使用new"><span class="nav-number">1.2.6.3.</span> <span class="nav-text">6.3 如果不是class类，不使用new</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#6-4-使用真正意思上的类Class写法，不使用prototype进行模拟扩展"><span class="nav-number">1.2.6.4.</span> <span class="nav-text">6.4 使用真正意思上的类Class写法，不使用prototype进行模拟扩展</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#6-5-this的注意事项"><span class="nav-number">1.2.6.5.</span> <span class="nav-text">6.5 this的注意事项</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#模块"><span class="nav-number">1.2.7.</span> <span class="nav-text">模块</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#7-1-使用import-export来做模块加载导出，不使用非标准模块写法"><span class="nav-number">1.2.7.1.</span> <span class="nav-text">7.1 使用import / export来做模块加载导出，不使用非标准模块写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#7-2-import-export-后面采用花括号-引入模块的写法时，须在花括号内左右各保留一个空格"><span class="nav-number">1.2.7.2.</span> <span class="nav-text">7.2 import / export 后面采用花括号{ }引入模块的写法时，须在花括号内左右各保留一个空格</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#React-Native项目结构规范"><span class="nav-number">1.3.</span> <span class="nav-text">React Native项目结构规范</span></a></li></ol></li></ol></div>
            
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2013 - 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">华Ing</span>
</div>

<div class="powered-by">
  Powered by <a class="theme-link" href="https://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.0.2"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"wurh"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  






  
  

  

  

  

  


</body>
</html>
